<template>
  <div class="contend">
    <h1 class="info">确认挂号信息</h1>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button type="success" :icon="User" @click="goManger">添加就诊人</el-button>
        </div>
      </template>
      <div class="center">
        <person
          class="item"
          v-for="(item, index) in UserArr"
          :key="item.id"
          :user="item"
          @click="changeIndex(index)"
          :index="index"
          :currentIndex="currentIndex"
        ></person>
      </div>
    </el-card>
    <el-card class="card">
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期</div>
          </template>
          {{ hospitalDoctorInfo?.workDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院</div>
          </template>
          {{ hospitalDoctorInfo.param?.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室</div>
          </template>
          {{ hospitalDoctorInfo.param?.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名</div>
          </template>
          {{ hospitalDoctorInfo.docname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称</div>
          </template>
          {{ hospitalDoctorInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长</div>
          </template>
          {{ hospitalDoctorInfo.skill }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医院服务费</div>
          </template>
          <span style="color: red"> ￥{{ hospitalDoctorInfo.amount }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="bottom">
      <el-button type="primary" size="large" class="btn" :disabled="currentIndex==-1?true:false" @click="goUser">确定挂号</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入组合式api
import { ref, onMounted, reactive } from "vue";
//引入接口
import { reqHospitalUser, reqHospitalDocInfo, } from "@/api/hospital";
import {reqSubmitOrders} from '@/api/User'
import type {responseOrderData} from '@/api/User/type.ts'

import { User } from "@element-plus/icons-vue";
//引入路由对象
import { useRoute,useRouter } from "vue-router";
import { ElMessage } from "element-plus";
//获取路由对象
let $route = useRoute();
let $router = useRouter();
//定义用户数组
let UserArr = ref<any>([]);
//定义医院信息
let hospitalDoctorInfo = reactive<any>({});
//存储下标
let currentIndex = ref<number>(-1);
//挂载时获取所有的就诊人信息
onMounted(() => {
  HashospitalUser();
  HasHospitalInfo();
});
//获取所有的就诊人信息
const HashospitalUser = async () => {
  let result = await reqHospitalUser();
  if (result.code == 200) {
    UserArr.value = result.data;
  }
};
//获取医院的详细信息
const HasHospitalInfo = async () => {
  //整理数据
  let id = $route.query.id;
  let result = await reqHospitalDocInfo(id as string);
  if (result.code == 200) {
    //存储数据
    Object.assign(hospitalDoctorInfo, result.data);
  }
};
//就诊人下标更改的回调
const changeIndex = (index: number) => {
  currentIndex.value = index;
};
//确认挂号按钮的回调
const goUser = async ()=>{
  //整理参数
  const {hoscode,id} = hospitalDoctorInfo;
  const patientId = UserArr.value[currentIndex.value].id;
  //调用接口
  let result:responseOrderData = await reqSubmitOrders(hoscode,id,patientId)
  if(result.code == 200){
    $router.push({
    path:'/user/orders',
    query:{id:result.data}
  })
  }else {
    ElMessage({
      type:'error',
      message:result.message
    })
  }
}
//添加就诊人接口的回调
const goManger = ()=>{
  //路由跳转
  $router.push({
    path:'/user/manage',
    query:{
      type:'add'
    }
  })
}
</script>

<style scoped lang="scss">
.contend {
  color: #7f7f7f;

  .info {
    font-size: 25px;
    font-weight: 900;
    margin-top: 30px;
    margin-bottom: 10px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-weight: 900;
      font-size: 18px;
      color: #7f7f7f;
    }
  }
  .center {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 32%;
      margin: 10px 5px;
    }
  }
  .card {
    margin-top: 15px;
  }
  .bottom {
    display: flex;
    justify-content: center;
    .btn {
      margin: 30px;
      padding: 0 30px;
    }
  }
}
</style>
